// 收入偏差
<template>
  <div class="home-bg padding-20">
    <div class="bg-white flex border align-center justify-between padding-left-20 padding-right-20 padding-top-10 padding-bottom-10 fill-box" style="width: 100%">
      <div class="font-size-18 font-weight-700">现金流收入偏差</div>
      <div @click.stop>
        <span class="padding-right-10">截止到</span>
        <el-date-picker class="no-padding-right-box" style="width: 110px;" :clearable="false" size="mini" v-model="searchMonth" type="month" placeholder="" @change="changeDate"> </el-date-picker>
      </div>
    </div>

    <div class="bg-white padding-left-20 padding-right-20 padding-bottom-20 new-table-style">
      <el-table stripe :data="dataList">
        <el-table-column align="left" label="收入类型">
          <template slot-scope="scope">
            <span>{{scope.row.typeName}}</span>
          </template>
        </el-table-column>
        <el-table-column align="left" label="资产/事项" prop="chargeItemName"> </el-table-column>
        <el-table-column align="left" label="累计计划收款" prop="title"> </el-table-column>
        <el-table-column align="left" label="累计实际收款" prop="title"> </el-table-column>
        <el-table-column align="left" label="差异">
          <template slot-scope="scope">
            <span class="cursor" @click="viewCharge('excute', scope.row)">1</span>
          </template>
        </el-table-column>
        <el-table-column align="left" label="差异率" prop="title"> </el-table-column>
        <el-table-column align="left" label="全年计划收款" prop="title"> </el-table-column>
        <el-table-column align="left" label="全年预测收款" prop="title"> </el-table-column>
        <el-table-column align="left" label="差异" prop="title">
          <template slot-scope="scope">
            <span class="cursor" @click="viewCharge('plan', scope.row)">2</span>
          </template>
        </el-table-column>
        <el-table-column align="left" label="差异率" prop="title"> </el-table-column>
        <el-table-column align="left" label="原因" prop="title"> </el-table-column>
        <el-table-column align="left" label="说明" prop="title"> </el-table-column>
      </el-table>
    </div>

    <!-- 事项弹窗 -->
    <el-dialog
      :title="viewChargeTitle"
      :visible.sync="isViewCharge"
      width="60%">
      <div class="new-table-style">
        <el-table stripe :data="chargeDataList">
          <el-table-column align="left" label="月份" prop="title"> </el-table-column>
          <el-table-column align="left" label="计划收款" prop="title"> </el-table-column>
          <el-table-column align="left" label="实际收款" prop="title"> </el-table-column>
          <el-table-column align="left" label="预测收款" prop="title"> </el-table-column>
          <el-table-column align="left" label="原因" prop="title"> </el-table-column>
        <el-table-column align="left" label="说明" prop="title"> </el-table-column>
        </el-table>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import dayjs from 'dayjs';
  import merge from 'webpack-merge';

  export default {
    data() {
      return {
        selectTime: this.$route.query.year + '-' + this.$route.query.month,
        searchMonth: this.$route.query.year + '-' + this.$route.query.month,
        dataList: [
          {
            typeName: '经营性收入',
            chargeItemKey: 1,
            chargeItemName: '商铺'
          }
        ],
        viewChargeTitle: '',
        isViewCharge: false,
        chargeDataList: []
      };
    },
    methods: {
      async getDataList() {
        // let res = await apiOperationIncomeCash({
        //   projectKeys: this.$route.query.projectKey ? [this.$route.query.projectKey] : null,
        //   planYear: this.$route.query.year,
        //   planMonth: this.$route.query.month,
        //   queryMainStore: this.queryMainStore,
        // });
        // this.dataList = res.rows || [];
      },

      async changeDate() {
        let date = dayjs(this.searchMonth).format('YYYY-MM');
        console.log(date);
        this.selectTime = date;
        let year = date.split('-')[0];
        let month = Number(date.split('-')[1]);
        this.$router.replace({
          query: merge(this.$route.query, { year: year, month: month }),
        });

        this.getDataList();
      },
      viewCharge (type, item) {
        if (type == 'excute') {
          this.viewChargeTitle = item.chargeItemName + '累计差异'
        } else {
          this.viewChargeTitle = item.chargeItemName + '全年差异'
        }

        this.isViewCharge = true
      }
    },
    mounted() {
      this.getDataList();
    },
    components: {},
  };
</script>

<style lang="scss" scoped>
.cursor {
  cursor: pointer;
}
</style>